<template>
	<view>
		<u-navbar :is-back="true" title="聊天设置"></u-navbar>
		<view class="gerenxinxi">
			<view class="gerenxinxi-cell">
				<view class="left">
					<image src="../../../static/img/cansai1.png" class="user-tx"></image>
					<text class="u-font-30 color5">赵丽</text>
				</view>
				<view class="right">
					<text class="color-green u-font-24">查看主页</text>
				</view>
			</view>
			<view class="gerenxinxi-cell">
				<view class="left">
					<text class="u-font-30 color5">消息免打扰</text>
				</view>
				<view class="right">
					<text class="color-green u-font-24" v-show="">开启</text>
					<text class="color-red u-font-24">关闭</text>
				</view>
			</view>
			<view class="gerenxinxi-cell">
				<view class="left">
					<text class="u-font-30 color5">投诉好友</text>
				</view>
				<view class="right">
					
				</view>
			</view>
			<view class="gerenxinxi-cell">
				<view class="left">
					<text class="u-font-30 color5">加黑好友</text>
				</view>
				<view class="right">
					<text class="color-green u-font-24">开启</text>
					<text class="color-red u-font-24"  v-show="">关闭</text>
				</view>
			</view>
			<view class="gerenxinxi-cell">
				<view class="left">
					<text class="u-font-30 color5" @click="deleFriend">删除好友</text>
				</view>
				<view class="right">
				</view>
			</view>
		</view>
		<u-modal v-model="show" title="删除好友" :content="deleContent" :show-cancel-button="true" confirm-text="删除" cancel-color="#000000" confirm-color="#ff0000" :content-style="contentstyle" :confirm-style="confirmstyle"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				deleContent:'是否删除此好友？删除后此好友相关聊天记录将同时被删除。',
				contentstyle:{
					color:'#7b7b7b',
					textAlign:'left'
				},
				confirmstyle:{
					
				}
			};
		},
		methods: {
			deleFriend() {
				this.show = true;
			}
		}
	}
</script>

<style lang="scss">
	.color-green{
		color: #2ea34a;
	}
.gerenxinxi{
	padding-left: 30rpx;
	.gerenxinxi-cell{
		height: 120rpx;
		border-bottom: 1px solid #eeeeee;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 50rpx 0 20rpx;
		.left{
			flex: 1;
			display: flex;
			align-items: center;
			.user-tx{
				width: 72rpx;
				height: 72rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}
		}
		.right{
			flex-shrink: 0;
		}
	}
}
</style>
